<template>
    <div class="newsDetail">
        <div class="mui-card-header mui-card-media">
            <img :src="newsDetail.img_url" />
            <div class="mui-media-body">
                {{newsDetail.title}}
                <p>
                    <span>发表于 2018-09-23</span> 
                    <span>阅读量: {{newsDetail.click}}</span> 
                </p>
            </div>
        </div>
        <div>
            <p class="describe">{{newsDetail.describe}}</p>
        </div>
        <div class="mui-card-content" >
            <img :src="newsDetail.img_url" alt="" width="100%"/>
        </div>
        <p class="detail">{{newsDetail.detail}}</p>
        <Comment></Comment>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
import Comment from './../subcomponents/Comment'
export default {
    data() {
        return {
            id: this.$route.params.id,
            newsDetail:""
        }
    },
    created() {
        this.axios.get('/api/newsList/newsDetail?id='+this.id).then((body)=>{
            if (body.data.status === 1) {
                this.newsDetail = body.data.message;
            }else{
                Toast("加载失败")
            }
        })
    },
    components:{
        Comment
    }
}
</script>


<style lang="less" scoped>
.newsDetail{
    padding: 0 5px;
    .describe,
    .detail{
        text-indent: 2em;
    }
}
</style>
